<template>
  <div>
    <button @click="openModal">显示传入的组件</button>
    <button @click="openModalHtml">显示html</button>
    <button @click="openModalHtml2">不显示取消</button>
    <button @click="openModalHtml3">不显示确定</button>
  </div>
</template>

<script>
import { greatModalUtil, greatVueConfig } from "great-vue";
import Vue from "vue";
import CardDemo01 from "../card/card-demo01";
export default {
  name: "render-demo01",
  methods: {
    openModal() {
      greatModalUtil
        .openModal({
          autoClose:false,
          content: CardDemo01,
          Vue,
        })
        .then((v) => {
          console.log(v);
          v.closeModal();
        });
    },
    openModalHtml() {
      greatModalUtil
        .openModal({
          content:
            '<h4 style="min-width: 350px;">这是一个html片段X<span>X</span></h4>',
          Vue,
        })
        .then((v) => {
          console.log(v);
        });
    },
    openModalHtml2() {
      console.log(greatVueConfig.setConfig({isConsole:true}));
      greatModalUtil
        .openModal({
          cancelText:'',
          content:
            '<h4 style="min-width: 350px;">不显示取消按钮（cancelText:\'\'）<span>X</span></h4>',
          Vue,
        })
        .then((v) => {
          console.log(v);
        });
    },
    openModalHtml3() {
      greatModalUtil
        .openModal({
          okText:'',
          content:
            '<h4 style="min-width: 350px;">不显示确定按钮（okText:\'\'）<span>X</span></h4>',
          Vue,
        })
        .then((v) => {
          console.log(v);
        });
    },
  },
  mounted() {
    this.openModal();
  },
};
</script>

<style scoped></style>
